<script setup>

</script>

<template>
  <div class="container">
    <div class="About">
      <ul class="footer-list">
        <li>了解更多</li>
        <li><a href="">Mikufans VI 视觉系统</a></li>
        <li><a href="">Hikos 敏捷组织</a></li>
        <li><a href="">Hushtag 薯饼</a></li>
        <li><a href="">this.Mikufans</a></li>
        <li><a href="">InstinAct 直觉交互</a></li>
      </ul>
    </div>
    <div class="sponsor">
      <ul class="footer-list">
        <li>Mikufans 支持者</li>
        <li><a href="">支持者名单</a></li>
        <li><a href="">长期服务计划</a></li>
        <li><a href="">加入我们</a></li>
        <li><a href="">我们的愿景</a></li>
      </ul>
    </div>
    <div class="Creator">
      <ul class="footer-list">
        <li>创作者领域</li>
        <li><a href="">Mikufans Interview</a></li>
        <li><a href="">Mikufans 超级事件</a></li>
        <li><a href="">Piapro 角色企划</a></li>
        <li><a href="">新人创作者支持计划</a></li>
      </ul>
    </div>
    <div class="policy">
      <ul class="footer-list">
        <li>用户协议</li>
        <li><a href="">Mikufans 内容转载许可</a></li>
        <li><a href="">Mikufans 用户协议</a></li>
      </ul>
    </div>
    <div class="inherit-policy">
      <ul class="footer-list">
        <li>扩展协议</li>
        <li><a href="">Piapro Character License</a></li>
        <li><a href="">Creative Common 3.0</a></li>
        <li><a href="">Apache License 2.0</a></li>
      </ul>

    </div>
  </div>
</template>

<style scoped>
* {
  color: #e6e6e6;
  vertical-align: middle;
  text-align: center;
}

.container {
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  flex: 0.5 1 1200px;
  padding: 30px 50px;

}


.container > div {
  width: 200px;
  padding: 20px 20px 0 20px;
  //border-right: 1px solid #444444;


}

.container > div:last-child {
  border: 0px;
}

.footer-list {
  font-size: 10pt;
}

.footer-list > li {
  display: block;
  height: 28px;
  margin: 5px 0px;
}

.footer-list > li:first-child {
  margin: 0px;
  font-size: 16pt;
  font-weight: bold;

}

.footer-list a {
  height: 10px;
  line-height: 10px;
  display: inline;
  padding: 5px 8px;

}

.footer-list a:hover {
  font-weight: bold;
  background-color: #e6e6e6;
}

.About > .footer-list > li:nth-child(3) a:hover {
  font-weight: bold;
  color: #e6e6e6;
  background-color: #f15a24;
}


</style>